import React from 'react';
import { TabBar } from 'antd-mobile';
import {withRouter} from 'react-router-dom';

class TabBarLink extends React.Component{
    render() {
        // 接收dashboard传过来的参数并筛选掉hide为true的项
        const tabBarData = this.props.data.filter(item => (!item.hide));
        // console.log(tabBarData);
        // console.log(this.props);
        const pathName = this.props.location.pathname;
        return(
            <div>
                <TabBar barTintColor="#eee" tabBarPosition="top">
                    {tabBarData.map((item,index)=>(
                        <TabBar.Item
                            mode="dark"
                            key={item.text}
                            badge={tabBarData[index].path==='/dashboard/msg'?this.props.badge:''}
                            title={item.text}
                            icon={{uri:require(`./img/${item.icon}.png`)}}
                            selectedIcon={{uri:require(`./img/${item.icon}-active.png`)}}
                            selected={pathName === item.path}   
                            onPress={()=>(
                                this.props.history.push(item.path)
                            )}
                        ></TabBar.Item>
                    ))}
                </TabBar>
            </div>
        )
    }
}

export default withRouter(TabBarLink);